<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"> 
    <title></title>
    <script src="./font/iconfont.js"></script>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
   

    <header>
        <nav id="cnav">
            <ul>
                <li>
                    <a href="#"><!-- 话题图标 -->
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shoucang"></use>
                        </svg>
                    </a>
                </li>
        
                <li>
                    <a href="./thought.html">
                        
                            <p>
                                想法
                            </p>
                        
                    </a>
                </li>
                <li>
                    <a href="#">
                        
                            <p>推荐</p>
                       
                    </a>
                </li>
                <li>
                    <a href="./hot list.html">
                        
                            <p>
                                热榜
                            </p>
                        
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-lingdang"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
 <div id main>
    <div class="search">
        <li>
            <a href="./sousuo.html">
                <div>
                    <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fangdajing"></use>
                </svg>
                <input type="text" placeholder="知乎搜索">
                </div>
        </li>
    </div>
</div>
<div class="main1">
    <li>
        <a href="#">
            <p>怎么考研？</p>
            <div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon--xiaogou"></use>
            </svg>
            <h10>
                小陈   
            </h10>
            <span class="text">两次考研的过程，我发现自己一战失利的原因就是时间匆忙＋没有系统的计划。那会我一直在招聘会、考公和考研之间摇摆，直到9月份才匆匆决定考研，每天想到什么看什么，学习节奏很乱，最后直接落败。二战我吸取经验，早早就开始准备，并制定了详细的规划，终于上岸211!</span>
        </div>
       
        </a>
    </li>

</div>
<div class="main2">
    <li>
        <a href="#">
            <p>怎么学好计算机</p>
            <div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-24gf-portraitMaleInfo2 "></use>
            </svg>
            <h10>
                小王
            </h10>
            <span class="text">信息技术是当今信息社会非常基础的存在和生产力，也正因此，在很长的一段时间里计算机学科都显得很吃香，也成为了诸多学生选择专业的首选。
                但和很多其他专业一样，计算机这个学科有着自己的特点、适应人群和并不简单轻松的职业发展路径。因此，本文将试图从专业学习、未来出路和生涯规划</span>
        </div>
       
        </a>
    </li>

</div>
<div class="main3">
    <li>
        <a href="#">
            <p>怎么让自己不emo</p>
            <div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiaomaomi"></use>
            </svg>
            <h10>
                小红
            </h10>
            <span class="text">静把自己最近的压力来源写下来，把自己的有绪具体感知感受文字描述下来。
                化抽象为具体，具现化后反倒能减轻内心的压
                力。
                ②摸摸家里边毛茸茸的小动物，为他们准备好食物，各种新鲜水果蔬菜，换着口味来。他们开心，我自己也会更加开心。
                ③转移注意力，看电影看小说，吃零食刷知乎，出门散心或健身房跑步运动。</span>
        </div>
       
        </a>
    </li>

</div>
</div>
    
 
    
    <footer>
        <div id="bnav">
           
                <ul>
                    <li>
                        
                        <a href="./home page.html">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-shouye2"></use>
                                </svg>
                            </div>
                            <p>首页</p>
                        </a>
                    </li>
                    <li>
                        
                        <a href="./attention.html">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-guanzhu"></use>
                                </svg>
                            </div>
                            <p>关注</p>
                        </a>
                    </li>
                    <li>
                        
                        <a href="#">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-tianjia"></use>
                                </svg>
                            </div>
                           
                        </a>
                    </li>
                    <li>
                        
                        <a href="#">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-a-huiyuanVIP"></use>
                                </svg>
                            </div>
                            <p>会员</p>
                        </a>
                    </li>
                    <li>
                        
                        <a href="./my.html">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-wode1"></use>
                                </svg>
                            </div>
                            <p>我的</p>
                        </a>
                    </li>
                </ul>
              
            </nav>
                </footer>
                <script>
                    window.onscroll=function(){
                    var st=document.documentElement.scrollTop;
                    console.log(st);
                    if(st>cnav.offsetHeight){
                        cnav.style.display="flex";
                        cnav.style.position="fixed";
                
                    }
                    else{
                        cnav.style.display="none"; 
                        cnav.style.position="static";

                    }
                }
                </script>
    </body>
</html>
